<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setState</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script type="text/babel">
    let app=document.getElementById('app');
    class Child extends React.Component{
        constructor(props) {
            super(props);
            this.state={
                num:1,
            }
        }
        render() {
            console.log("render从新渲染页面")
            return <fieldset>
                <legend><h2>steState的问题!!</h2></legend>
                <h1>num的值:{this.state.num}</h1>
                <hr/>
                <ol>
                    <h2>serState的问题</h2>
                    <li>在react控制点是事件处理函数中,以及React的生命周期函数中,setState是异步更新数据的</li>
                    <li>在React控制之外的事件处理函数中的setState是同步更新数据的!!!</li>
                </ol>
                <ul>
                    <button onClick={this.btnClick1.bind(this)}>按钮1</button>
                    <button id="bun2">按钮2</button>
                    <button onClick={this.btnClick3.bind(this)}>按钮3</button>
                    <button onClick={this.btnClick4.bind(this)}>按钮4</button>
                    <button onClick={this.btnClick5.bind(this)}>按钮5</button>
                    <button onClick={this.btnClick6.bind(this)}>按钮6</button>
                    <button onClick={this.btnClick7.bind(this)}>按钮7</button>
                </ul>
                <ol>
                    <h3>注意点</h3>
                    <li>steState方法并不是总是立刻更新,其会在将来延迟或者批量更新,所以,不要在调用了setState之后立刻获取state</li>
                    <li>不要依赖当前值计算下一个值</li>
                    <h3>解决办法</h3>
                    <li>如果想要在调用完setState之后获取改变之后的最近值,需要给setSetate添加第二个参数,该参数是一个回调函数,在该函数里面获取的state就是最新修改后的值</li>
                    <li>如果想要依赖state的当前值去计算下一个值不要再把第一个参数写成对象,要把第一个参数写成回调函数,这个回调函数中会有两个参数,分别是最新的props和最新的state
                        ,该函数return一个对象</li>
                </ol>
            </fieldset>
        }
        componentDidMount() {
            document.getElementById('bun2').addEventListener("click",()=>{
              this.setState({
                    num:this.state.num+1
                })
                console.log(this.state.num);
            },false)
        }

        btnClick1(){
this.setState({
    num:this.state.num+1
}
)
            console.log(this.state.num);
        }

        btnClick3(){
            setTimeout(()=>{
                this.setState({
                    num:this.state.num+1
                })
                console.log(this.state.num)
            },10)

        }
        btnClick4(){

        }
        btnClick5(){
this.setState({
    num:this.state.num+1
},()=>{
//    回调函数
    console.log(this.state.num)
})
        }
        btnClick6(){
            this.setState((state,props)=>{
               let a =state+1;
                return {
                    num:a
                }
            },()=>{
                console.log(this.state.num);
            });
        }
        btnClick7(){

        }
    }
    ReactDOM.render(<Child/>,app)
</script>